<?php include("includes/header.php"); ?>

<link type="text/css" rel="Stylesheet" href="css/bjqs.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>

<style>

#left_column
{
  float: left;
  width: 300px;
  margin-top: 10px;
  padding-left: 25px;
  padding-right: 25px;
}
#left_column_img
{
  padding-left:400px;        
}
#left_column h3
{
  color: #5f0808;
  font-weight:"Bold";
}
#left_column p
{
  color: #1e1e1e;
  font-size: 90%;
  font-weight:"Bold";
}
#middle_column
{
  float: right;
  margin-top: 10px;
  width:250px;
  padding-left: 0px;
  padding-right: 60px;
}
#middle_column_img
{
  padding-left:70px; 
}
#middle_column h3
{
  color: #5f0808;
  font-weight:"Bold";

}
#middle_column p
{
  color: #1e1e1e;
  font-size: 90%;
  font-weight:"Bold";
}
#right_column
{
  margin-top: 10px;
  float:left;
  width:250px;
  padding-top:10px;
  padding-left: 70px;
  padding-right: 15px;
}
#right_column_img
{
  padding-left:425px;
  padding-bottom:100px;
}
#right_column h3
{
  color: #5f0808;
  font-weight:"Bold";
  
} 
#right_column p
{
  font-size: 90%;
}
#banner-fade
{
  margin-top: 8px;
}
#container1
{
  width: 700px;
  height:250px;
  margin-left: auto ;
  margin-right: auto ;
  margin-top: 50px;
  margin-bottom:0px;
  border-bottom:solid;  
  border-width:1px;
}
#container2
{
  width: 700px;
  height:250px;
  margin-top:60px;
  margin-left: auto ;
  margin-right: auto ;
  margin-bottom:0px;
  border-bottom:solid; 
  border-width:1px;
}
#container3  
{
  width: 700px ;
  height:250px;
  margin-top:40px;
  margin-left: auto ;
  margin-right: auto ;
  margin-bottom:18px;
  border-bottom:solid; 
  border-width:1px;
}
</style>

<div id="banner-fade">
  <ul class="bjqs">
    <li><img src="images/banner_image1.png" alt="A vineyard" /></li>
    <li><img src="images/banner_image2.png" alt="A wine cellar" /></li>
    <li><img src="images/banner_image3.png" alt="Grapes on a vine" /></li>
    <li><img src="images/banner_image4.png" alt="Wine aging in barrels" /></li>
  </ul>
</div>

<div style="clear:both"></div>

<div id="container1">
<div id="left_column">
  <h3 style="text-align:center;"><a href="about.php" style="text-decoration:none;  color:#5f0808;">Welcome to Grapevine</a></h3> 
  <p style="text-align:center;">Grapevine is a user friendly interface that makes it easy to plan wine tastings through integration with social media. We want to make the entire experience of enjoying wine a more manageable activity so users can truly embrace all that comes with being an oenophile. 
</p>
</div>
<div id="left_column_img">
<img src="images/grapevinesquare2.png" style="height:200px;width:200px" />
</div>
</div>

<div id="container2">
<div id="middle_column">
  <h3 style="text-align:center;"><a href="search.php" style="text-decoration:none;  color:#5f0808;">Getting Started</a></h3>
  <p style="text-align:center;">We want to make it as easy as possible to enjoy our site. To get started searching for wineries click Getting Started above.</p>
</div>
<div id="middle_column_img">
<img src="images/redwine1.png" style="height:190px;width:200px;margin-left:20px;" />
</div>
</div>

<div id="container3">
<div id="right_column">
  <h3 style="text-align:center;"><a href="<?php if(isset($_SESSION['email'])){echo 'status.php'; } else { echo 'create_account.php';}?>" style="text-decoration:none;  color:#5f0808;">Keeping Updated</a></h3>
  <p style="text-align:center;">Here at Grapevine, our main priority is keeping you connected with everthing going on in the wine world. To gain access to everything Grapevine has to offer create an account now by clicking Keeping Updated above</p>
</div>
<div id="right_column_img">
<img src="images/wine-glass1.png" style="height:230px;width:140px" />
</div>
</div>

<script>
  jQuery(document).ready(function($) {
      $('#banner-fade').bjqs({
          'height' : 350,
          'width' : 950,
          'animtype' : 'fade',
          'animduration' : 1000,
          'animspeed' : 7000,
          'showcontrols' : true,
          'nexttext' : '',
          'prevtext' : '',
          'showmarkers' : false

      });
  });
</script>
<?php include("includes/footer.php"); ?>
